<template>
  <div ref="flow" class="wjy-flow">
    <div class="wjy-flow__renderer">
        <Pane :nodes="nodes" :container="flow" :scale="scale"></Pane>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Pane } from './index.js'


const props = defineProps({
    nodes: Array,
    edges: Array,
    scale: {
        type: Number,
        default: 1
    }
})

const flow = ref(null)
// onMounted(() => {
//     console.log(flow.value)
// })
</script>

<style scoped lang="scss">
.wjy-flow {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .wjy-flow__renderer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        .wjy-flow__pane {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
    }
}
</style>